<template>
	<view class="star-group" v-if="score" :class="countStar">
		<text class="star"></text>
		<text class="star"></text>
		<text class="star"></text>
		<text class="star"></text>
		<text class="star"></text>
		<text class="score margin-left-xs" v-if="scoreShow">{{score}}</text>
	</view>
</template>

<script>
	export default {
		name: 'star-group',
		props: {
			score: {
				type: String,
				default: '0'
			},
			scoreShow: {
				type: Boolean,
				default: true
			},
			maxScore: {
				type: Number,
				default: 10
			}
		},
		computed:{
			countStar() {
				let score = this.score
				if(this.maxScore == 10){
					score = (score-0)/2 + ''
				}
				let scaleInt = Math.floor(score-0)
				let scoreArr = score.split('.')
				let className = 'star' + scaleInt
				if(scoreArr.length > 1){
					className = className + ' dot'
				}
			    return className
			}
		},
	}
</script>

<style lang="scss">
.star-group{
	display: flex;
	align-items: center;
	flex-shrink: 0;
	.star{
		width: 20rpx;
		height: 20rpx;
		margin-right: 1px;
		background-image: url(/static/img/ic_index_star_normal.png);
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
	}
	&.star1 .star:nth-child(1),
	&.star2 .star:nth-child(-n + 2),
	&.star3 .star:nth-child(-n + 3),
	&.star4 .star:nth-child(-n + 4),
	&.star5 .star:nth-child(-n + 5) {
		background-image: url(/static/img/ic_index_star_select.png);
	}
	&.star0.dot .star:nth-child(1),
	&.star1.dot .star:nth-child(2),
	&.star2.dot .star:nth-child(3),
	&.star3.dot .star:nth-child(4),
	&.star4.dot .star:nth-child(5) {
		background-image: url(/static/img/ic_index_star_half.png);
	}
	
	.score{
		line-height: 1;
		font-size: 20rpx;
		font-weight: 400;
		color: #000000;
	}
}
</style>
